<template>
  <view class="list-box">
    <jianbianVue></jianbianVue>
    <view class="lb-cent">
      <view class="back-l">
        <u-icon name="arrow-left" size="30rpx" @click="backk"></u-icon>
      </view>
      <!-- 搜索 -->
      <view class="ba">
        <u-icon name="arrow-left" size="30rpx" @click="backk"></u-icon>
      </view>
      <view class="search">
        <view class="c">
          <u-search :show-action="false" :animation="false"></u-search>
          <button class="but">搜索</button>
        </view>
      </view>
      <!-- 标题 -->
      <view class="bt">
        <u-notice-bar mode="horizontal" :list="list" :volume-icon="false"></u-notice-bar>
      </view>
      <view class="bo-cent">
        <view class="sx">
          <view class="titw">
            <view>
              全部分类
              <view>
                <image src="../../static/to.png" mode=""></image>
              </view>
            </view>
            <view>
              销量 
              <view>
                <image src="../../static/to.png" mode=""></image>
              </view>
            </view>
            <view>
              价格 
              <view>
                <image src="../../static/to.png" mode=""></image>
              </view>
            </view>
          </view>
         
        </view>
        <!-- 商品 -->
        <view class="jshw">
          <view class="jshw-box" v-for="(item,index) in hawu" :key="index" @click="gopr">
            <contboxVue :title1="item.title1" :imageurl="item.imageurl" :title2="item.title2" :title3="item.title3"
              :title4="item.title4" :title6="item.title6" :title7="item.title7" :title5="item.title5"
              :title9="item.title9" :title8="item.title8">
            </contboxVue>
          </view>
        </view>
        <view class="btt">
          <u-button type="success" @click="gocart">前往购物车</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import jianbianVue from '../../compoents/jianbian/jianbian.vue'
  import contboxVue from '../../compoents/contbox.vue'
  export default {
    components: {
      jianbianVue,
      contboxVue
    },
    data() {
      return {
        list: [
          "再买69 .2 可享用 满79减10"
        ],
        hawu: [{
            imageurl: require('../../static/包子.png'),
            title1: '江苏无锡香菇猪肉包',
            title2: "猪肉肥美",
            title3: "鲜甜嫩软",
            title4: "多汁美味",
            title5: "多汁香嫩",
            title6: "8.79",
            title7: "笼",
            title9: "券",
            title8: "减10元"
          },
          {
            imageurl: require('../../static/西兰花.png'),
            title1: '浙江临海西兰花',
            title2: "基地直供",
            title3: "绿色培植",
            title4: "新鲜采摘",
            title5: "绿色新鲜",
            title6: "4.79",
            title7: "斤",
            title9: "券",
            title8: "减10元"
          },
          {
            imageurl: require('../../static/西红柿.png'),
            title1: '云南高山大西红柿',
            title2: "鲜嫩多汁",
            title3: "软甜爽口",
            title4: "入口美味",
            title5: "美味多汁",
            title6: "2.44",
            title7: "斤",
            title9: "券",
            title8: "减10元"
          },
          {
            imageurl: require('../../static/土豆.png'),
            title1: '宁夏西吉县马铃薯',
            title2: "基地直供",
            title3: "绿色培植",
            title4: "新鲜采摘",
            title5: "绿色新鲜",
            title6: "3.21",
            title7: "斤",
            title9: "券",
            title8: "减10元"
          }
        ],
      }
    },
    methods: {
      gopr() {
        uni.navigateTo({
          url: '/pages/product/product'
        })
      },
      backk() {
        uni.switchTab({
          url: '/pages/index/index'
        })
      },
      gocart() {
        uni.switchTab({
          url: '/pages/cart/cart'
        })
      }
    }
  }
</script>

<style lang="scss">
  .list-box {
    .lb-cent {
      width: 90%;
      height: 90vh;
      margin: auto;
      position: relative;

      .back-l {
        position: absolute;
        top: -140px;
        left: 10px;
      }

      .ba {
        position: relative;
        top: -95px;
        left: 10px;
      }

      .search {
        width: 85%;
        height: 100rpx;
        position: relative;
        position: absolute;
        top: -100px;
        right: 0px;

        .but {
          background-color: #49ba7c;
          color: white;
          font-size: 25rpx;
          width: 150rpx;
          height: 50rpx;
          line-height: 50rpx;
          border-radius: 25rpx;
          position: absolute;
          top: 3px;
          right: 5px;
        }
      }

      .bt {
        width: 100%;
        position: absolute;
        top: -50px;
      }

      .bo-cent {
        width: 100%;
        background-color: #f9f9f9;

        .sx {
          width: 100%;
          margin: auto;
          height: 70rpx;
          line-height: 50rpx;
          display: flex;
          justify-content: space-between;
            
          .titw{
            width: 90%;
            margin-left: 50rpx;
            margin-top: 20rpx;
            display: flex;
            justify-content: space-between;
            view {
              width: 30%;
              height: 50rpx;
              // border: 1px solid red;
              line-height: 50rpx;
              font-weight: bolder;
              font-size: 30rpx;
              display: flex;
              justify-content: space-evenly;
              view{
                width: 50rpx;
                height: 50rpx;
                image {
                  width: 50rpx;
                  height: 50rpx;
                }
              }
            }
          }

          

         
        }

        .jshw {
          width: 100%;
          margin-top: 35rpx;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          .jshw-box {
            margin-bottom: 25rpx;
            width: 48%;
            border-radius: 10%;
          }
        }

        .btt {
          margin: 20px 0px;
        }
      }

    }

  }
</style>